
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        订单
        <small>创建订单</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="bill-create-app">
    <div class="row">
        <ul class="breadcrumb">
            <li><a href="#bills">订单列表</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">

            <div class="form-group" :class="{ 'has-error': !rules.mobile }">
                <label>手机号：</label>
                <input class="form-control" v-model="form.mobile" >
            </div>

            <div class="form-group">
                <label>类型：<a class="btn btn-link btn-xs" @click="getCurriculum()"><i class="fa fa-refresh"></i></a></label>
                <select class="form-control" v-model="form.item_type">
                    <option :value="1">课程</option>
                    <option :value="3">专栏</option>
                    <!--<option :value="2">直播</option>-->
                </select>
            </div>

            <!-- 选择商品 -->
            <!-- 课程 -->
            <div class="form-group" v-if="1 == form.item_type" :class="{ 'has-error': !form.item_id }">
                <label>课程：<a class="btn btn-link btn-xs" @click="getCurriculum"><i class="fa fa-refresh"></i></a></label>
                <select class="form-control" v-model="form.item_id">
                    <option v-for="c in curriculumList" :value="c.id">{{c.name}} - &yen; {{c.price}}</option>
                </select>
            </div>
            <!-- 老师和专栏 -->
            <div class="form-group" v-if="3 == form.item_type" :class="{ 'has-error': !form_.teacherId }">
                <label>老师：<a class="btn btn-link btn-xs" @click="getTeacher"><i class="fa fa-refresh"></i></a></label>
                <select class="form-control" v-model="form_.teacherId">
                    <option v-for="c in teacherList" :value="c.id">{{c.realname}} - {{c.name}}</option>
                </select>
            </div>
            <div class="form-group" v-if="3 == form.item_type && form_.teacherId" :class="{ 'has-error': !form.item_id }">
                <label>专栏：<a class="btn btn-link btn-xs" @click="getColumn"><i class="fa fa-refresh"></i></a></label>
                <select class="form-control" v-model="form.item_id">
                    <option v-for="c in columnList" :value="c.id">{{c.title}} - &yen; {{c.price}}</option>
                </select>
            </div>

            <!-- 选择直播 -->
            <div class="form-group"></div>

            <div class="form-group">
                <label>订单类型：</label>
                <select class="form-control" v-model="form.bill_type">
                    <option :value="1">支付购买</option>
                    <option :value="4">赠送</option>
                </select>
            </div>
            <!-- 支付方式 -->
            <div class="form-group" v-if="1 == form.bill_type">
                <label>支付方式：</label>
                <select class="form-control" v-model="form.pay_method">
                    <option :value="1">支付宝</option>
                    <option :value="2">微信</option>
                    <option :value="0">其它</option>
                </select>
            </div>
            <div class="form-group" v-if="1 == form.bill_type">
                <label>实际支付金额：</label>
                <input class="form-control" v-model="form.pay_amount" type="number" min="0" step="0.01">
            </div>
            <div class="form-group" v-if="1 == form.bill_type">
                <label>支付时间(默认当前时间)：</label>
                <input class="form-control" v-model="form.pay_time" type="datetime-local">
            </div>

            <!-- 确认成功 -->
            <div class="form-group has-warning">
                <label>设置订单完成：</label>
                <input type="checkbox" class="checkbox" v-model="form.has_paid">
            </div>

            <div class="form-group">
                <a class="btn btn-primary" @click="submit">提交</a>
                <a class="btn btn-warning" href="#bills">返回</a>
            </div>
        </div>
    </div>
</section>
<!-- /.content -->

<script>
    function CreateForm() {
        this.mobile = '';
        this.item_type = 1;
        this.item_id = 0;
        this.bill_type = 1;
        this.pay_method = 0;
        this.pay_amount = '0.00';
        this.pay_time = new Date().format('yyyy-mm-ddThh:ii:ss');
        this.has_paid = true;
    }
    var billCreateApp = new Vue({
        el: '#bill-create-app',
        data: {
            form: new CreateForm(),
            form_: {
                teacherId: 0
            },
            curriculumList: [],
            columnList: [],
            teacherList: [],
            buyItems: {}
        },
        mounted(){
            this.getCurriculum();
            this.getTeacher();
        },
        methods: {
            getCurriculum(){
                ajax({
                    uri: '/bills/curriculum_names',
                    success: function (resp) {
                        this.curriculumList = resp.data;
                    }.bind(this)
                })
            },
            getColumn(teacherId){
                if (!teacherId) return;
                ajax({
                    uri: '/common/column_names',
                    data: {teacher_id: teacherId},
                    success: function (resp) {
                        this.columnList = resp.data;
                    }.bind(this)
                })
            },
            getTeacher(){
                ajax({
                    uri: '/common/teacher_names',
                    success: function (resp) {
                        this.teacherList = resp.data;
                    }.bind(this)
                })
            },
            changePrice(price){
                this.form.pay_amount = price;
            },
            submit(){
                var data = Object.assign({}, this.form);
                data.pay_time = new Date(data.pay_time).getTime() * 0.001;
                data.has_paid = data.has_paid ? 1 : 0;
                if (4 === data.bill_type) {
                    data.pay_method = 0;
                    data.pay_amount = '0.00';
                }

                ajax({
                    uri: '/bills/create',
                    data: data,
                    success: function(resp){
                        this.form = new CreateForm();
                        this.back();
                    }.bind(this)
                })
            },
            back(){
//                this.form = new CreateForm();
                window.location.hash = '#bills'
            }
        },
        computed: {
            rules: function() {
                var r = {};
                r.mobile = this.form.mobile.match(/^[1][3,4,5,7,8][0-9]{9}$/);
                return r;
            }
        },
        watch: {
            'form_.teacherId': function (nv, ov) {
                this.getColumn(nv)
            },
            'form.item_type': function (nv, ov) {
                this.form.item_id = 0;
                this.form_.teacherId = 0;
                this.form.pay_amount = 0;
            },
            'form.item_id': function (nv, ov) {
                if (1 == this.form.item_type) {
                    this.curriculumList.forEach(function (c, i) {
                        if (nv == c.id) this.form.pay_amount = c.price;
                    }.bind(this));
                } else if (3 == this.form.item_type) {
                    this.columnList.forEach(function (c, i) {
                        if (nv == c.id) this.form.pay_amount = c.price;
                    }.bind(this));
                }
            }
        }
    })
</script>